<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>局部组件3</title>
</head>
<body>
<div id="app">
    <router-link to="/">/ / / / / / //</router-link>
    <router-link to="/user">user</router-link>
    <router-link to="/dog">dog</router-link>
    <router-view></router-view>


</div>

<template id="userTem">
    <div>
        <h3>USERTEM 这是用户模板</h3>{{num}}
        <button @click="num++">++</button>
        <router-link to="/user/u1">用户u1</router-link>
        <router-link to="/user/u2">用户u2</router-link>
        <router-view></router-view>
    </div>
</template>
<template id="user1Tem">
    <div>
        <h3>USER1TEM 这是用户1模板</h3>用户u1{{num}}
        <button @click="num++">++</button>
    </div>
</template>
<template id="user2Tem">
    <div>

        <h3>USER2TEM 这是用户2模板</h3>u2{{num}}
        <button @click="num++">++</button>
    </div>
</template>
<template id="dogTem">
    <div>
        <h3>DOGTEM 这是狗狗模板</h3>{{num}}
        <button @click="num++">++</button>
        <router-link to="/dog">狗狗</router-link>
        <router-view></router-view>
    </div>
</template>


<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    let userCom = {
        data() {
            return {
                num: 0
            }
        },
        template: `#userTem`
    }
    let u1Com = {
        data() {
            return {
                num: 1
            }
        },
        template: `#user1Tem`
    }
    let u2Com = {
        data() {
            return {
                num: 2
            }
        },
        template: `#user2Tem`
    }
    let dogCom = {
        data() {
            return {
                num: 3
            }
        },
        template: `#dogTem`
    }


    let router = new VueRouter({
        routes: [{
            path: `/`,
            redirect: `/user`
        },
            {
                path: `/user`,
                component: userCom,
                children: [{
                    path: `/user/u1`,
                    component: u1Com
                },
                    {
                        path: `/user/u2`,
                        component: u2Com
                    }
                ]
            },
            {
                path: `/dog`,
                component: dogCom
            }
        ]

    })

    const APP = new Vue({
        el: `#app`,
        router
    })
</script>
</body>
</html>
